import React from 'react'
import {Badge, Col, Input, Row} from 'antd'
import PageHeaderWrapper from 'components/PageHeaderWrapper'
import {Button} from "antd/lib/index"
import DescriptionList from 'components/DescriptionList'
import styles from '../index.less'
import {toBadge, toText} from 'services/order'

const {Description} = DescriptionList

class OrderDesc extends React.Component {

  onChange (val) {
    const {dispatch} = this.props
    dispatch({
      type: 'createOrder/updateState',
      payload: {
        customerRemark: val,
      },
    })
  }

  componentDidMount () {
    const {current} = this.props
    const {customerRemark} = current
    this.onChange(customerRemark)
  }

  render () {
    const {
      current = {},
      children,
      amount,
      onOk,
      app,
      form: {
        getFieldDecorator,
      },
    } = this.props
    const {wxId, wxNo, customer = {}, orderEmpUsername, orderEmpRealname, customerRemark, status: oldStatus} = current
    const {friendNickname, friendRemark, orderCount, becomeFriendTime, operatorWxId = {}} = customer
    const {wxId: owxId, wxNo: owxNo} = operatorWxId
    const {user} = app
    const status = oldStatus ? oldStatus : 2
    const belongEmpName = orderEmpRealname ? `${orderEmpRealname}(${orderEmpUsername})` : `${user.realname}(${user.username})`

    const getOrderType = () => {
      const now = new Date()
      now.setHours(0)
      now.setMinutes(0)
      now.setSeconds(0)

      const bft = new Date(Date.parse(becomeFriendTime || new Date().format("yyyy-MM-dd HH:mm:ss")))

      return bft.getTime() < now.getTime() ? '后续订单' : '即时订单'
    }

    const action = <Button type="primary" onClick={onOk}>保存</Button>

    const typeMap = ['processing', 'warning']

    const extra = (
      <Row>
        <Col xs={24} sm={12}>
          <div className={styles.textSecondary}>状态</div>
          <div className={styles.heading}>
            <Badge status={toBadge(status)}/>{toText(status)}
          </div>
        </Col>
        <Col xs={24} sm={12}>
          <div className={styles.textSecondary}>订单金额</div>
          <div className={styles.heading}>¥ {amount}</div>
        </Col>
      </Row>
    )

    const description = (
      <DescriptionList className={styles.headerList} size="small" col="2">
        <Description term="创建人">{belongEmpName}</Description>
        <Description term="客户">{friendNickname || friendRemark}</Description>
        <Description
          term="归属运营号">{(wxNo || wxId) || (owxNo || owxId)}</Description>
        <Description term="订单类型">{getOrderType()}</Description>
        <Description term="复购订单">{orderCount && orderCount > 0 ? '是' : '否'}</Description>
        <Description term="当前时间">{new Date().format('yyyy-MM-dd HH:mm:ss')}</Description>
        <Description term="客户备注">{getFieldDecorator('remark', {initialValue: customerRemark})(<Input
          onChange={(e) => this.onChange(e.target.value)}
          placeholder={'请填写客户备注'} style={{width: '90%'}}
          size={'small'}/>)}</Description>
      </DescriptionList>
    )

    return (
      <PageHeaderWrapper
        title="创建订单"
        logo={
          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"/>
        }
        action={action}
        content={description}
        extraContent={extra}
      >
        {children}
      </PageHeaderWrapper>
    )
  }
}

export default OrderDesc
